<!doctype html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <title>基于 layui 表格的树形扩展 tableTreeDj - layui 第三方组件平台</title> 
  <meta name="renderer" content="webkit"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <meta name="description" content="使表格增加了树形结构展示的能力.完全依赖于layui的表格.
正因为如此,您可以像使用表格组件一样使用该组件.layui的表格功能.全都有.全都有.全都有.
该组件最大的特点就是原封不动的调用了官方的table组件.也就是说.随着官方的更新.可以随时使用table更好更炫酷的功能而不需要对本组件做任何操作."> 
  <link rel="stylesheet" href="/t/font_24081_60slu02pimt.css">
  <link rel="stylesheet" href="/layui/dist/css/layui.css">
  <link rel="stylesheet" href="/static/css/fly/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
 </head>
 <body>
  <div class="layui-header header header-extends" style="background-color: #24262F;"> 
   <div class="layui-container"> <a class="logo" href="https://layui.itmtr.cn/"> <img src="/static/images/layui/logo.png" alt="layui"> </a> 
    <div class="layui-form component" lay-filter="LAY-site-header-component"></div> 
    <ul class="layui-nav"> 
     <li class="layui-nav-item layui-hide-xs"> <a href="//layui.itmtr.cn/">框架</a> </li> 
     <li class="layui-nav-item layui-hide-xs layui-this"> <a href="/extend/index.html">扩展</a> </li> 
     <li class="layui-nav-item"> <a href="javascript:;">周边</a> 
      <dl class="layui-nav-child layui-nav-child-c"> 
       <dd lay-unselect> <a href="//layui.itmtr.cn/alone.html" target="_blank">独立组件</a> 
       </dd> 
       <dd class="layui-hide-sm layui-show-xs" lay-unselect> <a href="/extend/index.html">扩展组件</a> 
        <hr> 
       </dd> 
      </dl> </li> 
    </ul> 
   </div>
  </div><!--[if lt IE 9]>  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]--> 
  <div class="fly-extend-banner fly-extend-banner-sm"> 
   <div class="layui-carousel" id="FLY-extend-banner" data-height="200px"> 
    <div carousel-item> 
     <div style="background-image: url(/upload/2018_8/168_1535373858670_8825.jpg)">
      <div style="background: rgba(0,0,0,.6)"></div> 
     </div> 
    </div> 
   </div> 
   <h1 class="fly-extend-banner-title">layui 第三方组件平台</h1> 
   <div class="fly-extend-banner-release"> <a href="/extend/index.html" class="layui-btn layui-btn-lg">返回首页</a>
   </div> 
  </div>
  <div class="fly-extend-detail layui-card"> 
   <div class="layui-container"> 
    <div class="fly-extend-list-header"> 
     <h1 class="fly-extend-title layui-elip"> <a>基于 layui 表格的树形扩展</a> <span class="layui-badge layui-bg-green layui-hide-xs">tableTreeDj</span> </h1> 
     <div class="fly-extend-list-info"> <a href="/u/18991056/index.html" target="_blank" class="fly-extend-list-user" title="发布者"> <cite class="layui-hide-xs">帝江</cite> <img src="/images/fly/avatar/9.jpg" alt="帝江"> </a> 
     </div> 
    </div> 
    <blockquote class="fly-extend-list-desc layui-elem-quote"> 
     <p>使表格增加了树形结构展示的能力.完全依赖于layui的表格. 正因为如此,您可以像使用表格组件一样使用该组件.layui的表格功能.全都有.全都有.全都有. 该组件最大的特点就是原封不动的调用了官方的table组件.也就是说.随着官方的更新.可以随时使用table更好更炫酷的功能而不需要对本组件做任何操作.</p> 
    </blockquote> 
    <div class="fly-extend-list-bottom"> <span class="layui-inline">更新：2021-4-27 </span> <span class="layui-inline">创建：2021-3-19 </span> 
     <div class="layui-btn-container layui-extend-doc-edit"> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="layui-container"> 
   <div class="layui-row layui-col-space20"> 
    <div class="layui-col-sm3 layui-col-md2"> 
     <div class="layui-card"> 
      <ul class="fly-extend-doc-nav" lay-filter="extend-doc-nav"> 
       <li class="layui-this" lay-id="doc"> <a href="javascript:;"><i class="iconfont icon-wendang"></i> 文档</a> </li> 
       <li lay-id="download"> <a href="javascript:;"><i class="iconfont icon-xiazai"></i> 下载</a> </li> 
       <li lay-id=""> <a href="https://gitee.com/dqb12315/layui-table-tree.git" rel="nofollow" target="_blank"> <i class="iconfont icon-kaifashili"></i> 来源 </a> </li> 
      </ul> 
     </div> 
    </div> 
    <div class="layui-col-sm9 layui-col-md10"> 
     <div class="layui-card fly-extend-doc layui-show"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">文档</h3> 
      </div> 
      <div class="layui-card-body detail-body photos layui-text"> 
       <div class="layui-elem-quote">
         介绍
        <br>使官方表格组件具备树形结构展示能力(忘记怎么上传代码包了...现在github与gitee上面是最新的...)
       </div>
       <hr>
       <div class="layui-elem-quote">
        特别说明
        <br>1. 编写该组件的目的是因为看到其他的组件都或多或少的重写了官方原版的layui.table组件.感觉一个是增加了学习成本.一个是没有与官方保持一致.
        <br>2. 此组件只是填充了官方表格组件的parseData()方法与done().目的是为了整理数据排序以及展示.其他没做任何多余的工作.(您不用担心.您可以正常使用官方为您提供的这两个方法.)
        <br>3. 组件的getTable()方法返回了layui.table组件的实例.因此您具有了与layui.table一样的表格操作能力.毕竟返回的本来就是layui.table.
        <br>4. 很遗憾
        <img alt="[委屈]" title="[委屈]" src="/t4/appstyle/expression/ext/normal/73/wq_thumb.gif"> .本组件污染了原始表格.为了实现点击折叠展开功能.我给表格的某个字段绑定了点击事件.但是除此之外我不知道该怎么做才能在实现展开折叠操作时候做到不污染原始表格.可能会给您带来困扰.
        <br>4.1 建议将 title 字段设置为用户平时不点击的字段以期将影响降低到最小
        <img alt="[微笑]" title="[微笑]" src="/t4/appstyle/expression/ext/normal/5c/huanglianwx_thumb.gif"> 
       </div>
       <hr>
       <div class="layui-elem-quote">
         引入
       </div>组件引入方法请阅读 官方文档
       <br>https://layui.itmtr.cn/doc/base/modules.html#extend
       <br>
       <hr>
       <div class="layui-elem-quote">
         方法
       </div>
       <table class="layui-table"> 
        <tbody>
         <tr> 
          <th>方法名</th> 
          <th>描述</th> 
         </tr> 
         <tr> 
          <td> render </td> 
          <td>表格渲染.一般第一次显示调用.或者其他操作比如删除/添加等操作后也可以调用.第二次调用可以不传参数.如果传递参数会将上次参数覆盖.</td> 
         </tr> 
         <tr> 
          <td>reload</td> 
          <td>表格重载,内部调用了table.reload().一般用于搜索后显示数据.提交where条件给后端.</td> 
         </tr> 
         <tr> 
          <td>getTable</td> 
          <td>由于该组件内部使用了layui.table.如果想更细粒度的操作table.可以使用此方法获取table对象</td> 
         </tr> 
         <tr> 
          <td>其他方法</td> 
          <td>请阅读源码,只要方法名不以下划线开头都可以使用.如果需要的话.</td> 
         </tr>
        </tbody>
       </table>
       <div class="layui-elem-quote">
         参数
       </div>
       <table class="layui-table"> 
        <tbody>
         <tr> 
          <th>名称</th> 
          <th>描述</th> 
          <th>必填</th> 
          <th>默认值</th> 
         </tr> 
         <tr> 
          <td>keyId</td> 
          <td>数据ID的字段.一般对应数据库的主键.默认: 'id'</td> 
          <td>false</td> 
          <td>id</td> 
         </tr> 
         <tr> 
          <td>keyPid</td> 
          <td>数据父ID,与父级数据的ID相等.此参数与ID确定上下级关系.</td> 
          <td>false</td> 
          <td>pid</td> 
         </tr> 
         <tr> 
          <td>title</td> 
          <td>泛指数据标题,来自列(cols)的field属性.表明此字段在被点击时候会展开/折叠下级.</td> 
          <td>false</td> 
          <td>name</td> 
         </tr> 
         <tr> 
          <td>indent</td> 
          <td>缩进字符.在此设置的字符会添加到title列前面.次数为层级的值.效果就是层级越靠下.缩进的越多.</td> 
          <td>false</td> 
          <td>' &nbsp; &nbsp;'</td> 
         </tr> 
         <tr> 
          <td>icon</td> 
          <td> <br> 标题前面的小图标.<br> 在展开时候显示的样式使用icon.open设置,<br> 折叠时候使用icon.close.<br> 值是css的一个class属性字符串.该字符串可以包含多个类.<br><br> </td> 
          <td>false</td> 
          <td> 展开: layui-icon layui-icon-triangle-d<br> 折叠: layui-icon layui-icon-triangle-r<br> </td> 
         </tr> 
         <tr> 
          <td>showCache</td> 
          <td> 这里就要好好说说了.该字段表示数据展开折叠缓存.刷新时候可以保留上次的展开状态<br> a).如果传false表示不使用缓存.此时渲染完成的状态为全部折叠; <br> b).如果传true.会把操作过程中的展开折叠状态记录到 localStorage 中.key为 unfoldStatus; <br> c).可以传一个字符串.这时候与传true类似,区别是 localStorage 的 key 为传入的字符串.建议传字符串.可以有效避免多个页面之间的冲突.<br> </td> 
          <td>false</td> 
          <td>unfoldStatus</td> 
         </tr> 
         <tr> 
          <td>sort</td> 
          <td>排序方式,可选值为 asc / desc, 默认 asc.必须小写.会影响所有层级.</td> 
          <td>false</td> 
          <td>asc</td> 
         </tr>
        </tbody>
       </table>有没有发现全部都不是必填项
       <img alt="[嘻嘻]" title="[嘻嘻]" src="/t4/appstyle/expression/ext/normal/0b/tootha_thumb.gif">
       <br>
       <br>
       <br>
       <hr>
       <div class="layui-elem-quote">
        效果图
       </div>
       <img src="/upload/2021_3/18991056_1614843520314_59328.jpg"> 
       <br>
       <br>
       <div class="layui-elem-quote">
        代码示例
       </div>
       <pre>layui.use(['tableTreeDj'], function() {<br>        const tableTree = layui.tableTreeDj;<br>        const $ = layui.$;<br><br>        // 与 layui.table 的参数完全一致,内部本来就是把这些参数传递给table模块的<br>        const objTable = {<br>            elem: '#test'<br>            ,url: "./getData"<br>            ,cols: [[<br>                {field:'name', title:'名称' },<br>                {field:'id', title:'ID' },<br>                {field:'pid', title:'上级ID' },<br>                {field:'level', title:'层级' },<br>                {field:'agent_id', title:'代理ID' },<br>            ]]<br>            ,id:'list'<br>        }<br><br>        // 本组件用到的参数, 组件内部有默认值,与此一致,因此您可以只声明不一致的配置项<br>        const config = {<br>            keyId: "id" // 当前ID<br>            , keyPid: "pid" // 上级ID<br>            , title: "name" // 标题名称字段,此字段td用于绑定单击折叠展开功能<br>            , indent: ' &nbsp; &nbsp;' // 子级td的缩进.可以是其他字符<br>            // 图标<br>            , icon: {<br>                open: 'layui-icon layui-icon-triangle-d', // 展开时候图标<br>                close: 'layui-icon layui-icon-triangle-r', // 折叠时候图标<br>            }<br>            , showCache: true //是否开启展开折叠缓存,默认不开启.<br>            , sort: 'asc'<br>        };<br>        // 渲染 <br>        tableTree.render(objTable, config);<br><br>        // 其他一系列操作后.重新渲染表格,此时可以不传递参数.内部记录了上次传入的参数.<br>        tableTree.render();<br>        <br>        // 点击搜索按钮后重载数据.此时可以传入where条件.obj参数与官方表格一致.<br>        obj = {where:{id: 1}};<br>        tableTree.reload(obj);<br>    });</pre> 
      </div> 
     </div> 
     <div class="layui-card fly-extend-doc"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">下载</h3> 
      </div> 
      <div class="layui-card-body detail-body layui-text"> 
       <div class="layui-btn-container"> <a href="https://gitee.com/dqb12315/layui-table-tree.git" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary layui-border-red"> 去码云下载 </a> <a href="https://github.com/dongqibin/layui-table-tree.git" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary layui-border-black"> 去 GitHub 下载 </a> 
        <blockquote class="layui-elem-quote">
          该扩展组件由第三方用户主动投递，并由其自身进行维护，本站仅做收集。 
        </blockquote> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="fly-footer"> 
   <p>Copyright © 2021 <a href="/index.html">layui.itmtr.cn</a> MIT Licensed</p>
  </div>
  <script src="/layui/dist/layui.js"></script>
  <script>// common</script>

 </body>
<script src="/common/common.js"></script>
</html>